<template>
  <div style="display: flex">
    <div class="chart-container">
      <e-charts class="pie-chart" :option="option" autoresize />
    </div>
    <div style="width: 40%;height: 100%;margin-left: 20px">
      <a-space direction="horizontal" size="large" style="margin-left: auto;margin-bottom: 10px">
        <a-select v-model="form.year" style="margin-left: auto" :style="{width:'120px'}" placeholder="年份" :trigger-props="{ autoFitPopupMinWidth: true }">
          <a-option>2025</a-option>
          <a-option>2026</a-option>
          <a-option>2027</a-option>
        </a-select>
        <a-select v-model="form.month" style="margin-left: auto" :style="{width:'120px'}" placeholder="月份" :trigger-props="{ autoFitPopupMinWidth: true }">
          <a-option>1</a-option>
          <a-option>2</a-option>
          <a-option>3</a-option>
          <a-option>4</a-option>
          <a-option>5</a-option>
          <a-option>6</a-option>
          <a-option>7</a-option>
          <a-option>8</a-option>
          <a-option>9</a-option>
          <a-option>10</a-option>
          <a-option>11</a-option>
          <a-option>12</a-option>
        </a-select>
        <a-button type="primary" @click="searchAccount">
          <icon-search />
        </a-button>
      </a-space>
      <a-table :columns="columns" :data="accountData"  style="font-style: normal;font-size: 30px">
      </a-table>
    </div>
  </div>

</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import myAxios from "@/plugins/myAxios";

const columns = [{
  title: '房间类型',
  dataIndex: 'typeId',
  render: ({record}) => {
    // 根据 status 的值返回对应的状态文本
    switch (record.typeId) {
      case 1:
        return '大床房'; // status=0
      case 2:
        return '双床房'; // status=1
      case 3:
        return '小床房'; // status=2
    }
  }
},{
  title: '销售数量',
  dataIndex: 'count',
}, {
  title: '营业额',
  dataIndex: 'revenue',
}, {
  title: '入住率',
  dataIndex: 'percent',
}];

const form = ref({
  month: '',
  year:''
})

const accountData = ref([])
// 模拟数据
// const pieData = ref([
//   { value: 1048, name: '搜索引擎' },
//   { value: 735, name: '直接访问' },
//   { value: 580, name: '邮件营销' },
//   { value: 484, name: '联盟广告' },
//   { value: 300, name: '视频广告' }
// ]);

const pieData = ref([{
  name:'',
  value:''
}]);

// 计算属性生成 ECharts 配置
const option = computed(() => ({
  title: {
    text: '菜品销售统计',
    subtext: '饼状统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: pieData.value.map(item => item.name)
  },
  series: [
    {
      name: '菜品名称',
      type: 'pie',
      //radius: ['50%', '70%'], // 环形饼图
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: '{b}: {d}%'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      labelLine: {
        show: true
      },
      data: pieData.value
    }
  ],
  color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'] // 自定义颜色
}));

// 模拟数据更新（实际项目中可能是API获取）
// setTimeout(() => {
//   pieData.value = [
//     { value: 1548, name: '搜索引擎' },
//     { value: 535, name: '直接访问' },
//     { value: 480, name: '邮件营销' },
//     { value: 384, name: '联盟广告' },
//     { value: 200, name: '视频广告' }
//   ];
// });

//加载房间销售统计信息
const searchAccount = async() =>{
const res = await myAxios.get('/menu/room/account',{
  params:{
    year: form.value.year,
    month: form.value.month
  }
})
  if (res.data.code === '200'){
    accountData.value = res.data.data
  }
}

onMounted(async() =>{
  const res = await myAxios.get('/menu/order/account')
  if (res.data.code === '200'){
    console.log("res:",res.data.data)

    pieData.value = res.data.data.map(item=>({
      name: item.dishName,
      value: item.quantity
    }))
  }
})
</script>

<style scoped>
.chart-container {
  width: 60%;
  height: 100%;

  background-color: aqua;
  justify-content: center;
  align-items: center;
}

.pie-chart {
  width: 100%;
  height: 500px;
  max-width: 800px;
}
</style>